<template>
  <div class="logic-editor-container">
    <node-panel :lf="logicFlowInstance"></node-panel>
    <div class="logic-container">
      <div id="logic-canvas" ref="refCanvas"></div>
    </div>
    <node-setting-panel v-if="logicFlowInstance" :graphModel="logicFlowInstance.graphModel"></node-setting-panel>
  </div>
</template>
<script setup>
import "@logicflow/core/dist/index.css"
import NodePanel from "@/components/logic-editor/node-panel/index.vue";
import {initLogicFlow} from "@/components/logic-editor/useLogicFlow";
import NodeSettingPanel from "@/components/logic-editor/node-setting-panel/index.vue";


defineOptions({
  name: 'LoginEditor'
})
const {logicFlowInstance} = initLogicFlow('logic-canvas')
// provide('getModel', logicFlowInstance.value.model)
/**
 * 动作节点，将vForm组件的事件封装为节点
 */

</script>

<style scoped lang="scss">
.logic-editor-container {
  display: flex;
  height: calc(100vh - 60px);

  .logic-container {
    flex: 1
  }
}

:deep(.custom-vue-node-content) {
  width: 100%;
  height: 100%;
}

#logic-canvas {
  width: 100%;
  height: 100%;
}
</style>
